<template>
  <div class="totle">
    <ul>
      <li
        width="100%"
        v-for="(item, index) in Lunbotu"
        :key="index"
        :class="num == index ? 'active' : ''"
      >
        <img class="one_img" width="100%" :src="item.imageUrl" />
      </li>
    </ul>
    <div class="btn bigbanxin">
      <div class="tanxin ban">
        <div class="left">
          <ul>
            <li
              width="730px"
              height="284px"
              v-for="(item, index) in Lunbotu"
              :key="index"
              :class="num == index ? 'active' : ''"
            >
              <a href="#">
                <img width="730px" height="284px" :src="item.imageUrl" />
              </a>
            </li>
          </ul>
        </div>
        <div class="download">
          <a href="#" class="download_btn">下载客户端</a>
          <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
          <span class="shadow"></span>
          <span class="shadowr"></span>
        </div>
      </div>
      <input type="button" class="btn btn_l" value="<" @click="add()" />
      <input type="button" class="btn btn_r" value=">" @click="cut()" />
    </div>
  </div>
</template>

<script>
import { SlideshowApi } from "@/request/api";
export default {
  data() {
    return {
      Lunbotu: [],
      num: 7,
      time: "",
    };
  },
  methods: {
    cut() {
      if (this.num >= 0 && this.num <= 7) {
        this.num--;
        console.log(this.num--);
      } else if ((this.num = -1)) {
        this.num = 7;
      }
    },
    add() {
      if (this.num >= 0 && this.num <= 7) {
        this.num++;
        console.log(this.num++);
      } else if ((this.num = 8)) {
        this.num = 0;
      }
    },
  },

  created() {
    SlideshowApi().then((res) => {
      console.log(res.data.banners);
      let Lunbotu = res.data.banners;
      this.Lunbotu = Lunbotu;
      setInterval(() => {
        if (this.num > 0) {
          this.num--;
        } else if (this.num == 0) {
          this.num = 7;
        }
      }, 3000);
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";

.totle {
  width: 100%;
  overflow: hidden;
  z-index: -1;

  ul {
    position: relative;

    li {
      width: 100%;
      margin-left: -40px;
      position: absolute;

      .one_img {
        height: 285px;
        filter: blur(60px);
      }
    }
  }
}

.btn {
  position: relative;
  border-radius: 20px;
  z-index: 11;

  .ban {
    width: 982px;
    height: 285px;
    margin: 0 auto;
  }

  input {
    position: absolute;
    width: 40px;
    height: 70px;
    font-size: 40px;
    color: #fff;
    background-color: rgba(173, 171, 171, 0.1);
    border: none;
    cursor: pointer;
    font-family: "黑体";
  }

  .btn_l {
    top: 50%;
    left: 0;
    transform: translateY(-40px);
  }

  .btn_r {
    top: 50%;
    right: 0;
    transform: translateY(-40px);
  }

  input:hover {
    background-color: rgba(70, 69, 69, 0.4);
  }
}

.left {
  width: 745px;
  position: relative;

  ul {
    position: absolute;

    li {
      margin-left: 2px;
      position: absolute;
      transform: translateY(0px);
    }
  }
}

.active {
  z-index: 9;
  animation: donghua 2s linear;
}

.download {
  /* position: absolute; */
  top: 0;
  z-index: 20;
  right: -1px;
  width: 254px;
  height: 285px;
  background: url(https://s2.music.126.net/style/web2/img/index/download.png?c0b82edc744fd585031c774c15782682)
    no-repeat 0 0;

  .download_btn {
    display: block;
    width: 215px;
    height: 56px;
    margin: 186px 0 0 19px;
    background-position: 0 9999px;
    text-indent: -9999px;
  }

  p {
    font-size: 12px;
    margin: 10px auto;
    text-align: center;
    color: #8d8d8d;
  }

  .shadow {
    display: block;
    position: absolute;
    top: 0;
    left: -20px;
    width: 20px;
    height: 285px;
    background-position: -1px 0;
  }

  .shadowr {
    display: block;
    position: absolute;
    top: 0;
    width: 20px;
    height: 285px;
  }
}
</style>